<template>
	<view class="operation-table box relative bg-primary">
		<view class="table-box">
			<view class="box-header">
				<text class="header-line"></text>
				<text class="header-title">数据看板</text>
			</view>
			<view class="borad-box">
				<view class="borad-item">
					<view class="item-top">
						<text class="top-value">¥{{ indexData.zhaoshang.today || 0 }}</text>
						<text class="top-label">今日</text>
					</view>
					<view class="item-bottom">
						<view class="bottom-item">
							<text class="bottom-value">¥{{ indexData.zhaoshang.yesterday || 0 }}</text>
							<text class="bottom-label">昨日</text>
						</view>
						<view class="bottom-item">
							<text class="bottom-value active">¥{{ indexData.zhaoshang.week || 0 }}</text>
							<text class="bottom-label">本周</text>
						</view>
					</view>
					<view class="item-title">
						<text>招商收益</text>
					</view>
				</view>
				<view class="borad-item">
					<view class="item-top">
						<text class="top-value">¥{{ indexData.kaidan.today || 0 }}</text>
						<text class="top-label">今日</text>
					</view>
					<view class="item-bottom">
						<view class="bottom-item">
							<text class="bottom-value">¥{{ indexData.kaidan.yesterday || 0 }}</text>
							<text class="bottom-label">昨日</text>
						</view>
						<view class="bottom-item">
							<text class="bottom-value active">¥{{ indexData.kaidan.week || 0}}</text>
							<text class="bottom-label">本周</text>
						</view>
					</view>
					<view class="item-title">
						<text>开单收益</text>
					</view>
				</view>
				<view class="borad-item">
					<view class="item-top">
						<text class="top-value">¥{{ indexData.xuchong.today || 0 }}</text>
						<text class="top-label">今日</text>
					</view>
					<view class="item-bottom">
						<view class="bottom-item">
							<text class="bottom-value">¥{{ indexData.xuchong.yesterday || 0 }}</text>
							<text class="bottom-label">昨日</text>
						</view>
						<view class="bottom-item">
							<text class="bottom-value active">¥{{ indexData.xuchong.week || 0 }}</text>
							<text class="bottom-label">本周</text>
						</view>
					</view>
					<view class="item-title">
						<text>续充收益</text>
					</view>
				</view>
			</view>
		</view>
		<view class="table-box">
			<view class="box-header">
				<text class="header-line"></text>
				<text class="header-title">水管家</text>
			</view>
			<view class="data-box">
				<view class="data-item">
					<text class="data-value">¥{{ guanjiaData.month || 0 }}</text>
					<text class="data-label">本月收益</text>
				</view>
				<view class="data-item">
					<text class="data-value">¥{{ guanjiaData.total || 0 }}</text>
					<text class="data-label">累计收益</text>
				</view>
			</view>
		</view>
		<view class="table-box">
			<view class="box-header">
				<text class="header-line"></text>
				<text class="header-title">服务商</text>
			</view>
			<view class="data-box">
				<view class="data-item">
					<text class="data-value">¥{{ fuwushangData.month || 0 }}</text>
					<text class="data-label">本月收益</text>
				</view>
				<view class="data-item">
					<text class="data-value">¥{{ fuwushangData.total || 0 }}</text>
					<text class="data-label">累计收益</text>
				</view>
			</view>
		</view>
    <view class="chart-box">
      <view class="chart-title">
        <text class="title-line"></text>
        <text class="title-text">近30天招商统计</text>
        <view class="count-wrap">
          <text>累计招商:</text>
          <text class="count-value">{{ zhaoshang_count || 0 }}</text>
        </view>
      </view>
      <view class="chart-wrap active">
        <qiun-data-charts :ontouch="true" type="column" :opts="columnOption" :chartData="zhaoshang_info" />
      </view>
    </view>
    <view class="chart-box">
      <view class="chart-title">
        <text class="title-line"></text>
        <text class="title-text">近15天开单统计</text>
        <view class="count-wrap">
          <text>累计开单量:</text>
          <text class="count-value">{{ kaidan_count || 0 }}</text>
        </view>
      </view>
      <view class="chart-wrap">
        <demo-chart :chartData="kaiDanData" />
      </view>
    </view>
    <view class="chart-box">
      <view class="chart-title">
        <text class="title-line"></text>
        <text class="title-text">近15天总用水情况</text>
      </view>
      <view class="chart-wrap">
        <demo-chart :chartData="yongShuiData" />
      </view>
    </view>
	</view>
</template>

<script>
import {formatDate, request, showLoading} from "@/utils/tool";
import DemoChart from  "./a.vue"
export  default  {
  components: {DemoChart},
  data(){
    return {
      columnOption: {
        color: ["#1890FF"],
        padding: [15, 15, 0, 5],
        enableScroll: true,
        enableMarkLine: true,
        legend: {},
        xAxis: {
          disableGrid: true,
          itemCount: 6,
          scrollShow: true, //新增是否显示滚动条，默认false
          scrollAlign: 'left', //滚动条初始位置
          scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
          scrollColor: '#DEE7F7', //默认为 #A6A6A6
        },
        yAxis: {
          disableGrid: false,
          gridType: "dash",
          data: [{
            min: 0,
          }]
        },
        extra: {
          column: {
            type: "group",
            width: 16,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            seriesGap: 5,
            barBorderRadius: [
              16,
              16,
              16,
              16
            ]
          },
        },
      },
      yongShuiData: {},
      kaidanOption:{
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,15],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          title: "单位：年"
        },
        yAxis: {
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridType: "dash",
          dashLength: 4,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            {
              position: "left",
              title: "折线"
            },
            {
              position: "right",
              min: 0,
              max: 200,
              title: "柱状图",
              textAlign: "left"
            },
            {
              position: "right",
              min: 0,
              max: 200,
              title: "点",
              textAlign: "left"
            }
          ]
        },
        extra: {
          mix: {
            column: {
              width: 20
            }
          }
        }
      },
      kaiDanData: {},
      zhaoshang_info: {},
      kaidan_info: {},
      kaidan_count:0,
      zhaoshang_count:0,
      guanjiaData:{
        month:0,
        total:0
      },
      fuwushangData:{
        month:0,
        total:0
      },
      indexData: {
        kaidan: {
          yesterday:0,
          week:0,
          today:0
        },
        xuchong: {
          yesterday:0,
          week:0,
          today:0
        },
        zhaoshang:{
          yesterday:0,
          week:0,
          today:0
        }
      },
    }
  },
  created() {
    this.initData()
  },
  methods: {
    parseYongShuiData(data){
      const {list}=  data
      const categories = [], list1 = [], list2 = [];
      let res = {
        categories: categories,
        series: [
          {
            name: "制水量",
            index: 1,
            type: "column",
            data: list1,
            color:'#EFC245'
          },
          {
            name: "收益",
            type: "line",
            style: "curve",
            color: "#1890ff",
            disableLegend: true,
            data: list2
          },
        ]
      };
      list.forEach(item => {
        const {date,count,money} = item
        categories.push(formatDate(date,"MM-DD"))
        list1.push(count)
        list2.push(money)
      })
      this.yongShuiData = res
    },
    parseKaiDanData(data){
      const {count,list:dataList} = data
      this.kaidan_count = count || 0
      const categories = [], list1 = [], list2 = [];
      let res = {
        categories: categories,
        series: [
          {
            name: "开单量",
            index: 1,
            type: "column",
            data: list1,
            color:'#EFC245'
          },
          {
            name: "开单收益",
            type: "line",
            style: "curve",
            color: "#1890ff",
            disableLegend: true,
            data: list2
          },
        ]
      };
      dataList.forEach(item => {
        const {date,count,money} = item
        categories.push(formatDate(date,"MM-DD"))
        list1.push(count)
        list2.push(money)
      })
      this.kaiDanData = res
    },
    parseZhaoShangData(data){
      const categories = [], list = [];
      const {count:totalCount,list:dataList} = data
      dataList.forEach(item => {
        const {date,count} = item
        categories.push(formatDate(date,'MM-DD'))
        list.push(count)
      })
      this.zhaoshang_count = totalCount
      this.zhaoshang_info = {
        categories: categories,
        series: [{
          name: "招商数量",
          data: list,
          gridType: 'dash'
        }]
      };
    },
    async initData() {
      const hide = showLoading("正在获取")
      const resp = await request({
        url: "/yunying/baobiaoindex",
        method: "GET",
      }).finally(hide);
      const data = resp.data
      const {index,guanjia,fuwushang,zhaoshang_info,kaidan_info,yongshui_info} = data
      this.indexData = index
      this.guanjiaData = guanjia
      this.fuwushangData = fuwushang
      this.parseZhaoShangData(zhaoshang_info)
      this.parseKaiDanData(kaidan_info)
      this.parseYongShuiData(yongshui_info)
      console.log(data,'data')
    }
  },
}
</script>

<style lang="scss" scoped>
	.operation-table {
		padding: 20rpx 24rpx;
		box-sizing: border-box;
.chart-box{
  padding: 26rpx 32rpx;
  box-sizing: border-box;
  position: relative;
  background: #fff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-bottom: 24rpx;
  .chart-wrap.active{
    height: 450rpx;
  }
  .chart-title{
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .count-wrap{
      display: flex;
      align-items: center;
      margin-left: auto;
      font-weight: bold;
      font-size: 28rpx;
      color: #91999B;
      line-height: 44rpx;
      .count-value{
        color: #3361F0;
      }
    }
    .title-line{
      width: 8rpx;
      height: 28rpx;
      background: #3361F0;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
    }
    .title-text{
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      line-height: 44rpx;
    }
  }

}
		.table-box {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 24rpx;

			.data-box {
				margin-top: 32rpx;
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				position: relative;
				padding-bottom: 20rpx;

				&::after {
					content: "";
					display: block;
					width: 2rpx;
					background-color: #EFEFEF;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: 4rpx;
					bottom: 4rpx;
				}

				.data-item {
					flex: 1;
					display: flex;
					flex-flow: column;
					align-items: center;

					.data-value {
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						line-height: 44rpx;
					}

					.data-label {
						font-size: 28rpx;
						color: #949494;
						line-height: 44rpx;
					}
				}
			}

			.borad-box {
				display: flex;
				flex-flow: row nowrap;
				box-sizing: border-box;
				position: relative;
				margin-top: 24rpx;

				.item-title {
					font-size: 28rpx;
					color: #949494;
					line-height: 44rpx;
					margin-top: 10rpx;
				}

				.item-bottom {
					width: 100%;
					padding: 0 20rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;

					&::after {
						content: "";
						display: block;
						width: 2rpx;
						background-color: #EFEFEF;
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						top: 20rpx;
						bottom: 20rpx;
					}

					.bottom-item {
						display: flex;
						flex-flow: column;
						align-items: center;
						margin-top: 20rpx;


						.bottom-value {
							font-weight: bold;
							font-size: 16rpx;
							color: #000000;
							line-height: 44rpx;

							&.active {
								color: #D80000;
							}
						}

						.bottom-label {
							font-size: 22rpx;
							color: #BBBBBB;
							line-height: 44rpx;
						}
					}
				}

				.borad-item {
					flex: 1;
					display: flex;
					flex-flow: column;
					align-items: center;
					position: relative;

					&::after {
						content: "";
						display: block;
						width: 2rpx;
						background-color: #EFEFEF;
						position: absolute;
						right: 0;
						top: 24rpx;
						bottom: 24rpx;
					}

					.item-top {
						display: flex;
						flex-flow: column;
						align-items: center;

						.top-value {
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
							line-height: 44rpx;
						}

						.top-label {
							font-size: 24rpx;
							color: #BBBBBB;
							line-height: 44rpx;
						}
					}

					&:last-child {
						&::after {
							background-color: #fff;
						}
					}
				}
			}

			.box-header {
				display: flex;
				align-items: center;

				.header-line {
					width: 8rpx;
					height: 28rpx;
					background: #3361F0;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					margin-right: 10rpx;
				}

				.header-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					line-height: 44rpx;
				}
			}
		}
	}

	page {
		height: unset;
	}
</style>